<template>
  <div class="my-home-container">
    welcome to IOT system
    <q-btn label="测试" @click="onClick"></q-btn>
    <div>设备总数：{{devConnTbl.total}}</div>
    <div>在线数量：{{devConnTbl.online}}</div>
    <div>离线数量：{{devConnTbl.offline}}</div>
  </div>
</template>

<script lang="ts">

import { defineComponent, ref, onMounted, onUnmounted, nextTick } from 'vue';
import { TupleType } from 'components/views/basic/basicViewModel';
import { useMessageNotify } from 'src/hook/common/useMessageNotify';
import { useScadaPacket } from 'src/hook/editor/useScadaPacket';
import { socket } from 'src/socket/websocket';
import { useCommonStore } from 'stores/commonStore';
import { storeToRefs } from 'pinia';


import BaseComponent from 'components/views/BaseComponent.vue';
import ViewBasicTuple from 'components/views/basic/ViewTupleBasic.vue';


export default defineComponent({
  name: 'IndexPage',
  extends: BaseComponent,
  components: {
    ViewBasicTuple
  },
  setup () {
    //***************************************************************
    //      store
    //***************************************************************
    const commonStore = useCommonStore();
    let {
      devConnTbl
    } = storeToRefs(commonStore);

    //*********************************************************
    // 消息通知
    //*********************************************************
    //消息通知
    const {
      showMessage
    } = useMessageNotify();


    //*********************************************************
    //          初始化
    //*********************************************************
    //socket通信函数
    const {
      wsGetDeviceConnectionInfo
    } = useScadaPacket();

    //*********************************************************
    //          初始化
    //*********************************************************
    const onClick = () => {
      if (socket) {
        wsGetDeviceConnectionInfo(socket);
      } else {
        showMessage('websocket 连接断开!')
      }
    }

    //初始化
    const init = () => {
      //看板，读取设备信息
      nextTick(() => {
        if (socket) {
          wsGetDeviceConnectionInfo(socket);
        }
      });
    }

    //挂载
    onMounted(() => {
      //初始化
      init();
    });

    //组件卸载
    onUnmounted(() => {

    });


    return {
      TupleType,

      devConnTbl,
      onClick
    };
  }
});
</script>

<style lang="scss" scoped>
.my-home-container {
  width: calc(100vw - 10px);
  height: calc(100vh - 10px);

  padding: 10px;
  background-color: #fffcfc;
}
</style>
